<template>
	<view class="userinfo-container">
		<view class="header-box">
			<text class="header-title">修改个人信息</text>
		</view>
		
		<scroll-view scroll-y class="scroll-container">
			<view class="form-box">
				<view class="input-group">
					<text class="label">用户名 <text class="required">*</text></text>
					<input type="text" v-model="userInfo.username" placeholder="请输入用户名" class="input" />
				</view>
				
				<view class="input-group">
					<text class="label">年龄</text>
					<picker @change="handleAgeChange" :value="ageIndex" :range="ageOptions" class="picker">
						<view class="picker-value">
							{{ userInfo.age || '请选择年龄' }}
						</view>
					</picker>
				</view>
				
				<view class="input-group">
					<text class="label">性别</text>
					<view class="radio-group">
						<view class="radio-item" @click="userInfo.gender = '男'">
							<view class="radio-circle" :class="{'selected': userInfo.gender === '男'}"></view>
							<text>男</text>
						</view>
						<view class="radio-item" @click="userInfo.gender = '女'">
							<view class="radio-circle" :class="{'selected': userInfo.gender === '女'}"></view>
							<text>女</text>
						</view>
					</view>
				</view>
				
				<view class="input-group">
					<text class="label">民族</text>
					<picker @change="handleEthnicityChange" :value="ethnicityIndex" :range="ethnicityOptions" class="picker">
						<view class="picker-value">
							{{ userInfo.ethnicity || '请选择民族' }}
						</view>
					</picker>
				</view>
				
				<view class="input-group">
					<text class="label">普通话等级</text>
					<picker @change="handleMandarinLevelChange" :value="mandarinLevelIndex" :range="mandarinLevels" class="picker">
						<view class="picker-value">
							{{ userInfo.mandarin_level || '请选择普通话等级' }}
						</view>
					</picker>
				</view>
				
				<view class="password-section">
					<view class="section-header" @click="showPasswordForm = !showPasswordForm">
						<text class="section-title">修改密码</text>
						<text class="arrow">{{showPasswordForm ? '▲' : '▼'}}</text>
					</view>
					
					<view class="password-form" v-if="showPasswordForm">
						<view class="input-group">
							<text class="label">原密码 <text class="required">*</text></text>
							<input class="input" type="password" v-model="passwordForm.oldPassword" placeholder="请输入原密码" />
						</view>
						
						<view class="input-group">
							<text class="label">新密码 <text class="required">*</text></text>
							<input class="input" type="password" v-model="passwordForm.newPassword" placeholder="请输入新密码" />
						</view>
						
						<view class="input-group">
							<text class="label">确认密码 <text class="required">*</text></text>
							<input class="input" type="password" v-model="passwordForm.confirmPassword" placeholder="请再次输入新密码" />
						</view>
						
						<button class="change-password-btn" @click="changePassword">修改密码</button>
					</view>
				</view>
				
				<button class="save-btn" @click="saveUserInfo" :disabled="loading">
					{{ loading ? '保存中...' : '保存修改' }}
				</button>
			</view>
		</scroll-view>
		
		<view class="pattern-decoration top-left"></view>
		<view class="pattern-decoration top-right"></view>
		<view class="pattern-decoration bottom-left"></view>
		<view class="pattern-decoration bottom-right"></view>
	</view>
</template>

<script>
	import { authAPI } from '../../utils/api.js';
	
	export default {
		data() {
			return {
				userInfo: {
					username: '',
					age: '',
					gender: '',
					ethnicity: '',
					mandarin_level: ''
				},
				showPasswordForm: false,
				passwordForm: {
					oldPassword: '',
					newPassword: '',
					confirmPassword: ''
				},
				// 年龄选项
				ageOptions: Array.from({length: 100}, (_, i) => (i + 1).toString()),
				ageIndex: 0,
				// 民族选项
				ethnicityOptions: [
					'汉族', '蒙古族', '回族', '藏族', '维吾尔族', '苗族', '彝族', '壮族', '布依族', '朝鲜族',
					'满族', '侗族', '瑶族', '白族', '土家族', '哈尼族', '哈萨克族', '傣族', '黎族', '傈僳族',
					'佤族', '畲族', '高山族', '拉祜族', '水族', '东乡族', '纳西族', '景颇族', '柯尔克孜族', '土族',
					'达斡尔族', '仫佬族', '羌族', '布朗族', '撒拉族', '毛南族', '仡佬族', '锡伯族', '阿昌族', '普米族',
					'塔吉克族', '怒族', '乌孜别克族', '俄罗斯族', '鄂温克族', '德昂族', '保安族', '裕固族', '京族', '塔塔尔族',
					'独龙族', '鄂伦春族', '赫哲族', '门巴族', '珞巴族', '基诺族'
				],
				ethnicityIndex: 0,
				// 普通话等级选项
				mandarinLevels: ['一级甲等', '一级乙等', '二级甲等', '二级乙等', '三级甲等', '三级乙等'],
				mandarinLevelIndex: 0,
				loading: false
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				// 从本地存储获取用户信息
				const userInfoStr = uni.getStorageSync('userInfo');
				if (userInfoStr) {
					try {
						const userInfo = JSON.parse(userInfoStr);
						this.userInfo = {
							...this.userInfo,
							...userInfo
						};
						
						// 设置选择器的索引
						if (this.userInfo.age) {
							this.ageIndex = this.ageOptions.findIndex(age => age === this.userInfo.age.toString());
							if (this.ageIndex === -1) this.ageIndex = 0;
						}
						
						if (this.userInfo.ethnicity) {
							this.ethnicityIndex = this.ethnicityOptions.findIndex(item => item === this.userInfo.ethnicity);
							if (this.ethnicityIndex === -1) this.ethnicityIndex = 0;
						}
						
						if (this.userInfo.mandarin_level) {
							this.mandarinLevelIndex = this.mandarinLevels.findIndex(item => item === this.userInfo.mandarin_level);
							if (this.mandarinLevelIndex === -1) this.mandarinLevelIndex = 0;
						}
					} catch (e) {
						console.error('解析用户信息失败', e);
					}
				}
			},
			handleAgeChange(e) {
				this.ageIndex = e.detail.value;
				this.userInfo.age = parseInt(this.ageOptions[this.ageIndex]);
			},
			handleEthnicityChange(e) {
				this.ethnicityIndex = e.detail.value;
				this.userInfo.ethnicity = this.ethnicityOptions[this.ethnicityIndex];
			},
			handleMandarinLevelChange(e) {
				this.mandarinLevelIndex = e.detail.value;
				this.userInfo.mandarin_level = this.mandarinLevels[this.mandarinLevelIndex];
			},
			saveUserInfo() {
				// 验证表单
				if (!this.userInfo.username) {
					uni.showToast({
						title: '用户名不能为空',
						icon: 'none'
					});
					return;
				}
				
				// 保存用户信息
				this.loading = true;
				uni.showLoading({
					title: '保存中...'
				});
				
				// 调用API更新用户信息
				authAPI.updateUserInfo(this.userInfo)
					.then(res => {
						if (res.code === 200) {
							// 更新本地存储
							uni.setStorageSync('userInfo', JSON.stringify(this.userInfo));
							
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							});
							
							// 返回上一页
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						} else {
							uni.showToast({
								title: res.message || '保存失败',
								icon: 'none'
							});
						}
					})
					.catch(err => {
						console.error('更新用户信息失败', err);
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						});
					})
					.finally(() => {
						uni.hideLoading();
						this.loading = false;
					});
			},
			changePassword() {
				// 验证密码
				if (!this.passwordForm.oldPassword || !this.passwordForm.newPassword || !this.passwordForm.confirmPassword) {
					uni.showToast({
						title: '请填写完整密码信息',
						icon: 'none'
					});
					return;
				}
				
				if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
					uni.showToast({
						title: '两次输入的新密码不一致',
						icon: 'none'
					});
					return;
				}
				
				uni.showLoading({
					title: '修改中...'
				});
				
				// 调用API修改密码
				authAPI.changePassword({
					old_password: this.passwordForm.oldPassword,
					new_password: this.passwordForm.newPassword
				})
					.then(res => {
						if (res.code === 200) {
							uni.showToast({
								title: '密码修改成功',
								icon: 'success'
							});
							
							// 清空密码表单
							this.passwordForm = {
								oldPassword: '',
								newPassword: '',
								confirmPassword: ''
							};
							
							// 收起密码修改表单
							this.showPasswordForm = false;
						} else {
							uni.showToast({
								title: res.message || '密码修改失败',
								icon: 'none'
							});
						}
					})
					.catch(err => {
						console.error('修改密码失败', err);
						uni.showToast({
							title: '密码修改失败',
							icon: 'none'
						});
					})
					.finally(() => {
						uni.hideLoading();
					});
			}
		}
	}
</script>

<style lang="scss">
	.userinfo-container {
		position: relative;
		height: 100vh;
		background-color: #E0E6E9; // 莫兰迪淡灰蓝背景
		padding: 40rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	
	.header-box {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
		
		.header-title {
			font-size: 40rpx;
			font-weight: bold;
			color: #8A9EA8; // 莫兰迪灰蓝色文字
			text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
		}
	}
	
	.scroll-container {
		flex: 1;
		width: 100%;
	}
	
	.form-box {
		background-color: rgba(255, 255, 255, 0.95);
		border-radius: 20rpx;
		padding: 40rpx;
		border: 6rpx solid #D1C8BC; // 莫兰迪淡棕色边框
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 40rpx;
	}
	
	.input-group {
		margin-bottom: 25rpx;
		
		.label {
			display: block;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 10rpx;
			
			.required {
				color: #ff4d4f;
			}
		}
		
		.input {
			height: 90rpx;
			background-color: #f8f8f8;
			border-radius: 10rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			border: 2rpx solid #8A9EA8; // 莫兰迪灰蓝色边框
		}
	}
	
	.radio-group {
		display: flex;
		padding: 10rpx 0;
		
		.radio-item {
			display: flex;
			align-items: center;
			margin-right: 60rpx;
			
			.radio-circle {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				border: 2rpx solid #8A9EA8;
				margin-right: 10rpx;
				position: relative;
				
				&.selected::after {
					content: '';
					position: absolute;
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					background-color: #8A9EA8;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
	}
	
	.picker {
		height: 90rpx;
		background-color: #f8f8f8;
		border-radius: 10rpx;
		border: 2rpx solid #8A9EA8;
		
		.picker-value {
			height: 90rpx;
			line-height: 90rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			color: #333;
		}
	}
	
	.password-section {
		margin-top: 30rpx;
		margin-bottom: 20rpx;
		
		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #eee;
			
			.section-title {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}
			
			.arrow {
				font-size: 28rpx;
				color: #8A9EA8;
			}
		}
		
		.password-form {
			margin-top: 20rpx;
		}
	}
	
	.change-password-btn {
		height: 80rpx;
		line-height: 80rpx;
		background-color: #8A9EA8;
		color: #fff;
		font-size: 28rpx;
		border-radius: 40rpx;
		margin-top: 20rpx;
	}
	
	.save-btn {
		height: 90rpx;
		line-height: 90rpx;
		background: linear-gradient(135deg, #8A9EA8, #B6C5CD); // 莫兰迪灰蓝渐变
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
		margin-top: 40rpx;
		border: 2rpx solid #D1C8BC; // 莫兰迪淡棕色边框
		
		&[disabled] {
			opacity: 0.6;
		}
	}
	
	// 新疆传统花纹装饰
	.pattern-decoration {
		position: absolute;
		width: 150rpx;
		height: 150rpx;
		background-image: radial-gradient(circle, #A8B2B9 10%, transparent 30%),
						  radial-gradient(circle, #A8B2B9 10%, transparent 30%);
		background-size: 40rpx 40rpx;
		background-position: 0 0, 20rpx 20rpx;
		opacity: 0.5;
		z-index: -1;
	}
	
	.top-left {
		top: 20rpx;
		left: 20rpx;
	}
	
	.top-right {
		top: 20rpx;
		right: 20rpx;
		transform: rotate(90deg);
	}
	
	.bottom-left {
		bottom: 20rpx;
		left: 20rpx;
		transform: rotate(270deg);
	}
	
	.bottom-right {
		bottom: 20rpx;
		right: 20rpx;
		transform: rotate(180deg);
	}
</style> 